<template>
  <div class="login">
    <!-- <h3>{{ baseUrl }}</h3> -->
    <el-card>
      <img class="img" src="@/assets/logo.png" alt="" />
      <!-- 表单
      el-form  
        label-width:标题宽度
        model:绑定表单数据
        rules:绑定规则
        ref:用于调用它的方法
         el-form-item
             prop:用于表单验证的字段设置
             label-width:用于设置标题宽度      
      
       -->
      <el-form :model="form" :rules="rules" ref="form"> 
        <el-form-item prop="mobile">
          <el-input placeholder="请输入手机号" v-model="form.mobile"></el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-input placeholder="请输入验证码" v-model="form.code"></el-input>
        </el-form-item>
        <el-form-item prop="isPass"> 
          <el-checkbox v-model="form.isPass">我已阅读并同意「用户协议」和「隐私条款」</el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button class="btn" type="primary" @click='submit'>登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import {authorizationsPost} from '@/api/index.js'
import {setItem, getItem, removeItem} from '@/utils/auth.js'
export default {
    data (){
        return{
          // baseUrl: process.env.VUE_APP_URL,
            form: {
                mobile: '13288888888',
                code: '246810',
                isPass: false
            },
            rules: {
                mobile: [
                    {required: true, message: '必填', trigger: 'blur'},
                    {
                        validator: (rule, value, callback)=>{
                            const reg= /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
                            if(reg.test(value)){
                                callback()
                            }else{
                                callback(new Error('请输入正确的手机号'))
                            }                           
                        },
                        trigger: 'blur'
                    }
                ],
                code: [
                    {required: true, message: '必填', trigger: 'blur'},
                    {
                        min:6,
                        max:6,
                        message: "请输入六位验证码",
                        trigger: 'blur'
                    }
                ],
                isPass: [
                  {required: true, message: '必填', trigger: 'blur'},
                {
                  validator: (rule, value, callback)=>{
                           if(value){
                             callback()
                           }else{
                             callback(new Error('请勾选协议'))
                           }                 
                        },
                        trigger: 'change'
                }               
                ]
            }
        }
    },
    methods: {
      submit (){
        this.$refs.form.validate(async result=>{
          if(result){
            const res = await authorizationsPost(this.form)
              // console.log('await登录接口返回值', res)
              setItem(res.data.token)
              // console.log(getItem());
            // this.$message.success('验证成功')
            this.$router.push('/home')
          }else{
            // this.$message.error('验证失败')
          }
        })
      }
    }
}
</script>
<style lang="less" scoped>
.login {
  height: 100%;
  background-image: url(~@/assets/login.png);
  background-size: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .el-card {
    width: 460px;
    // text-align: center;
    .img {
      display: block;
      width: 200px;
      margin: 0 auto;
    }
    .btn {
      width: 100%;
    }
    ::v-deep .el-card__body {
      padding: 20px 40px;
    }
  }
}
</style>
